<template>
  <van-form ref="form" class="form" label-width="0" @submit="onSubmit">
    <form-field>
      <van-field
        v-model="form.mobile"
        type="tel"
        name="mobile"
        placeholder="请输入手机号"
        :rules="rules.mobile"
      />
    </form-field>
    <form-field>
      <van-field
        ref="smsCode"
        v-model="form.smsCode"
        name="smsCode"
        placeholder="请输入验证码"
        :rules="rules.smsCode"
      >
        <template #button>
          <van-button
            class="captcha-btn"
            size="small"
            type="primary"
            native-type="button"
            :disabled="disabledCaptcha"
            round
            plain
            @click="onSendCaptcha"
          >
            {{ curCountdownText }}
          </van-button>
        </template>
      </van-field>
    </form-field>
    <!---->
    <van-button class="form-submit" round block type="info" native-type="submit">下一步</van-button>
  </van-form>
</template>

<script>
  import FormField from '@views/login/components/form-field';
  import { phone } from '@utils/pattern';
  import { getUrlParams } from '@utils/util';
  import { phoneSms } from '@api/common/system';
  import { verifyCode } from '@api/login';

  export default {
    components: { FormField },
    data() {
      return {
        form: {
          mobile: '',
          smsCode: ''
        },
        rules: {
          mobile: [
            { required: true, message: '请填写手机号' },
            { required: true, message: '格式不正确', pattern: phone }
          ],
          smsCode: [{ required: true, message: '请填写验证码' }]
        },
        disabledCaptcha: false,
        totalCountdown: 60,
        curCountdown: null,
        timeoutID: null
      };
    },
    computed: {
      curCountdownText() {
        const { curCountdown } = this;
        if (curCountdown === null) return '发送';

        return curCountdown;
      }
    },
    beforeDestroy() {
      this.curCountdown = null;
      clearTimeout(this.timeoutID);
    },
    methods: {
      onSendCaptcha() {
        const { placeId } = getUrlParams();
        const { mobile } = this.form;

        this.$refs.form
          .validate('mobile')
          .then(() => {
            this.disabledCaptcha = true;

            phoneSms({ placeId, mobile }).then(({ success, msg, data }) => {
              this.$toast(msg);
              if (!success) return (this.disabledCaptcha = false);

              this.curCountdown = data;
              this.runCaptchaCountdown();
            });
          })
          .catch(() => {});
      },
      runCaptchaCountdown() {
        this.timeoutID = setTimeout(() => {
          this.curCountdown--;

          if (this.curCountdown <= -1) {
            this.curCountdown = null;
            this.disabledCaptcha = false;
          } else if (this.curCountdown > -1) this.runCaptchaCountdown();
        }, 1000);
      },
      onSubmit() {
        const { placeId } = getUrlParams();
        const { mobile, smsCode } = this.form;

        verifyCode({ placeId, mobile, smsCode }).then(({ success, msg }) => {
          if (!success) return this.$toast(msg);

          this.$emit('success', { mobile, smsCode });
        });
      }
    }
  };
</script>

<style scoped lang="less">
  .form {
    padding: 40px 20px 0;

    .field-item {
      &:not(:first-child) {
        margin-top: 15px;
      }
    }

    .van-cell {
      padding-right: 0;
      padding-left: 0;
    }

    .captcha-btn {
      width: 52px;
      height: 24px;
      font-size: 13px;
      color: #5ccc2b;
      vertical-align: top;
    }
  }

  .form-submit {
    width: 335px;
    height: 48px;
    margin: 42px auto;
    font-size: 17px;
    background: linear-gradient(-90deg, rgba(47, 225, 183, 1) 0%, rgba(40, 215, 228, 1) 99%);
    border: none;
    border-radius: 24px;
  }
</style>
